import {
  Component,
  AfterViewInit,
  EventEmitter,
  OnDestroy,
  Input,
  Output,
  OnInit,
  OnChanges,
  ViewChild,
  ElementRef
} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpService } from "../../core/service/http.service";

@Component({
  selector: 'app-tiny-editor',
  templateUrl: './myeditor.component.html'
})
export class MyeditorComponent implements AfterViewInit, OnDestroy {

  content = '';
  @Input() elementId: String;
  // @ViewChild('native') element: ElementRef;

  // tslint:disable-next-line:no-output-on-prefix
  @Output() onEditorContentChange = new EventEmitter();

  editor;


  setElement(value) {
    if (this.editor) { this.editor.setContent(value == null ? '' : value); }
  }
  constructor(private http: HttpClient,
    private http1: HttpService,
  ) {


  }

  ngAfterViewInit() {
    const self = this;
    tinymce.init({
      selector: '#' + this.elementId,
      height: 400,
      //   plugins: ['link', 'table', 'image', 'imageupload'],

      // //  fontsize_formats: '12px 16px 17px 18px 26px 28px 30px 32px 48px 50px 52px',


      plugins: ['link', 'paste', 'table', 'image'],
      "toolbar_items_size": "small",
      "block_formats": "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;",

      // "toolbar1": "insertfile undo redo | formatselect | bullist numlist | link unlink | uploadimg image media | fullscreen",
      // "toolbar2": "fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat",


      toolbar: 'insertfile undo redo | bold italic underline strikethrough | fontsizeselect |  | fontselect | fontcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l  media  image | removeformat ',

      font_formats: "宋体=宋体;黑体=黑体;隶书=隶书;幼圆=幼圆;",

      skin_url: '../../assets/skins/lightgray',
      media_live_embeds: true,
      image_dimensions: false,

      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
          // console.log(this.editor);
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      },
      // 图片上传功能
      images_upload_handler: function (blobInfo, success, failure) {
        let formData;
        formData = new FormData();

        formData.append("formFile", blobInfo.blob());
        // console.log(formData);
        self.uploadFile(self.http1.url + 'FeedbackInformationService/UpdateFile', formData).subscribe(response => {
          const pic = response;
          const url = self.http1.IP_PORT + "/" + pic['result'].path.replace(/\\/g, '/');
          success(url);
        });
      },
    });
  }

  // 上传图片
  private uploadFile(url: string, formData: any) {
    const self = this;
    const headers = new HttpHeaders();
    headers.set("Accept", "application/json");
    return self.http.post(url, formData, { headers: headers });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }




}
